<template>
  <div class="flip-calendar">
    <!-- 翻页容器 -->
    <div class="flip-container" :class="{ 'flipping': isFlipping }">
      <!-- 当前日期卡片 -->
      <div class="card front">
        <div class="date-info">
          <h2>{{ formatDate(currentDate) }}</h2>
          <p>{{ getWeekday(currentDate) }}</p>
        </div>
      </div>

      <!-- 下一日期卡片 -->
      <div class="card back">
        <div class="date-info">
          <h2>{{ formatDate(nextDate) }}</h2>
          <p>{{ getWeekday(nextDate) }}</p>
        </div>
      </div>
    </div>

    <!-- 控制按钮 -->
    <div class="controls">
      <button @click="prevDay" class="nav-btn">← 上一天</button>
      <button @click="nextDay" class="nav-btn">下一天 →</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
const currentDate = ref(new Date()); // 当前日期
const nextDate = ref(new Date()); // 下一日期
const isFlipping = ref(false); // 是否正在翻页

// 格式化日期为 "YYYY年MM月DD日"
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}年${month}月${day}日`;
};

// 获取星期几
const getWeekday = (date) => {
  const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  return weekdays[date.getDay()];
};

// 切换到上一天
const prevDay = () => {
  if (isFlipping.value) return; // 防止快速多次点击
  isFlipping.value = true;

  setTimeout(() => {
    currentDate.value = new Date(currentDate.value);
    currentDate.value.setDate(currentDate.value.getDate() - 1);
    nextDate.value = new Date(currentDate.value);
    nextDate.value.setDate(nextDate.value.getDate() - 1);
    isFlipping.value = false;
  }, 500); // 动画持续时间
};

// 切换到下一天
const nextDay = () => {
  if (isFlipping.value) return; // 防止快速多次点击
  isFlipping.value = true;

  setTimeout(() => {
    currentDate.value = new Date(currentDate.value);
    currentDate.value.setDate(currentDate.value.getDate() + 1);
    nextDate.value = new Date(currentDate.value);
    nextDate.value.setDate(nextDate.value.getDate() + 1);
    isFlipping.value = false;
  }, 500); // 动画持续时间
};
</script>

<style scoped>
.flip-calendar {
  width: 300px;
  margin: 0 auto;
  text-align: center;
  font-family: Arial, sans-serif;
}

.flip-container {
  position: relative;
  width: 100%;
  height: 200px;
  perspective: 1000px;
}

.card {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 0.5s ease-in-out;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.front {
  z-index: 2;
}

.back {
  transform: rotateY(180deg);
}

.flipping .front {
  transform: rotateY(-180deg);
}

.flipping .back {
  transform: rotateY(0deg);
}

.date-info h2 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}

.date-info p {
  font-size: 18px;
  color: #666;
}

.controls {
  margin-top: 20px;
}

.nav-btn {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.nav-btn:hover {
  background-color: #45a049;
}
</style>